<template>
	<div> 
	<!-- 瀑布流 -->
	<van-list
	  v-model="loading"
	  :finished="finished"
	  finished-text="没有更多了"
	  @load="onLoad"
	   :immediate-check="false"
	   class="big-box"
	   
	>
	 <div v-for="item in list" :key="item.id">
	 	<div class="brand-img">
	 		<img :src="item.scene_pic_url" alt="" style="width: 100%; height: 208px; display: block;">
	 		<div class="brand-textbox">
	 			<p class="brand-text1">{{item.title}}</p>
	 			<p class="brand-text2">{{item.subtitle}}</p>
				<p class="brand-text3">{{item.price_info}}元起</p>
	 			</div>
	 	</div>
	 	
	 	
	 </div>
	</van-list>
	
	</div>
</template>

<script>
	import{
		listaction
	} from "../../api/project/index.js"
	
	export default{
		data(){
			return{
				page:1,
				 total:0,
				 list: [],
				      loading: false,
				      finished: false,
			}
		},
		created(){
			this.init()
		},
		methods:{
			async init(){
				var res = await listaction({
					page:this.page
				})
				console.log(res)
				this.list.push(...res.data.data);
				this.page = this.page+1;	
				this.total = res.data.total;
				this.loading = false
			},
			  onLoad() {
				  if(this.total < this.page){
				  	this.finished = true
				  	 return
				  }
				  this.init()
			  }
			     
		}
		
	}
</script>

<style scoped lang="scss">
	 @import "./scss/index.scss";
	 .big-box{
		 margin-bottom: 50px;
	 }
	 .brand-textbox{
		 text-align: center;
		 .brand-text1{
			 color: #333;
			     font-size: .46667rem;
			     margin-top: .4rem;
		 }
		 .brand-text2{
			 color: #999;
			     font-size: .32rem;
			     margin-top: .21333rem;
			     padding: 0 .26667rem;
		 }
		 .brand-text3{
			 color: red;
		 }
	 }
</style>
